<template>
  <div class="login">
    <div class="login-left">
      <div class="login-left-info">
        <span>Meteor System</span>
        <span>
          是一款开箱即用的开源后台管理系统解决方案，基于 Vue3 和 Ant Design Vue 实现，使用了最新的前端技术栈。
        </span>
      </div>
    </div>
    <div class="login-right">
      <a-form :model="usernameForm" class="login-form">
        <h2>登&nbsp;&nbsp;录</h2>
        <a-form-item name="username" :rules="rules.username">
          <a-input v-model:value="usernameForm.username" placeholder="请输入用户名">
            <template #prefix>
              <UserOutlined class="site-form-item-icon"/>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item name="password" :rules="rules.password">
          <a-input-password v-model:value="usernameForm.password" placeholder="请输入密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon"/>
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item name="code" :rules="rules.code">
          <a-input-group compact>
            <a-input size="large" placeholder="请输入验证码" v-model:value="usernameForm.code" style="margin-right: 10px; width: calc(100% - 112px)">
              <template #prefix>
                <BellOutlined class="site-form-item-icon"/>
              </template>
            </a-input>
            <view style="border: 1px solid #d5d5d5;">
              <a-image style="height: 38px;" :width="100" :preview="false" :src="image" @click="loadCaptcha" @error="errorCallback" :fallback="errorBase64"/>
            </view>
          </a-input-group>
        </a-form-item>

        <a-form-item>
          <a-form-item name="remember" no-style>
            <a-checkbox>记住我</a-checkbox>
          </a-form-item>
          <a class="login-form-forgot" href="">忘记密码</a>
        </a-form-item>

        <a-form-item>
          <a-button :loading="loading" :disabled="disabled" type="primary" block @click="login()">
            登录
          </a-button>
        </a-form-item>

      </a-form>
      <p class="info">© Meteor System Beta</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive, computed, ref, onMounted} from "vue";
import { message } from "ant-design-vue";
import {
  UserOutlined,
  LockOutlined,
  BellOutlined,
} from "@ant-design/icons-vue";
import { UsernameLoginForm } from "@/api/interface/login/login";
import { GlobalStore } from "@/store/index";
import { UserStore } from "@/store/modules/user";
import router from "@/routers";
import authApi from "@/api/auth/auth-api";
import {encrypt} from "@/utils/rsa";

const globalStore = GlobalStore()
const userStore = UserStore()

/**
 * 登录规则
 */
const rules = reactive(<any>{
  username: [{required: true, message: "请输入用户名"}],
  password: [{required: true, message: "请输入密码"}],
  code: [
    {required: true, message: "请输入验证码"},
    {min: 4, max: 4, message: "验证码为4位长度"},
  ],
});

/**
 * 异常验证码base64
 */
const errorBase64 = ''
/**
 * 验证码图片
 */
let image = ref(<string>errorBase64)
/**
 * 获取验证码
 */
const loadCaptcha = () => {
  authApi.captcha().then((res) => {
    image.value = res.data.image
    usernameForm.uuid = res.data.uuid
  }).catch((error) => {
    errorCallback()
  })
}
/**
 * 验证码异常回调
 */
const errorCallback = () => {
  image.value = errorBase64
}

/**
 * 用户名等表单
 */
const usernameForm = reactive(<UsernameLoginForm>{
  loginType: 'password',
});

/**
 * 登录按钮状态
 */
let loading = ref(<boolean>false)

/**
 * 登录按钮状态
 */
const disabled = computed(() => {
  return !(usernameForm.username && usernameForm.password);
});

/**
 * 登录
 */
const login = () => {
  loading.value = true
  const form = <UsernameLoginForm>JSON.parse(JSON.stringify(usernameForm))
  form.username = encrypt(usernameForm.username)
  form.password = encrypt(usernameForm.password)
  authApi.login(form).then((tokenRes) => {
    globalStore.setTokenInfo(tokenRes.data);
    authApi.current().then((userRes) => {
      const roleList = userRes.data.roleList;
      const permissionList = userRes.data.permissionList;
      if (!roleList.length && !permissionList.length) {
        message.error("无权限登录")
      } else {
        userStore.setUser(userRes.data.data);
        userStore.setPermissions(permissionList);
        userStore.setRoles(roleList);
        message.success("登录成功");
        router.push({name: "home"});
      }
    }).catch((error) => {
      message.error("获取用户信息失败")
    })
  }).finally(() => {
    loading.value = false;
  });
};

onMounted(() => {
  loadCaptcha()
})
</script>

<style scoped lang="scss">
@import "@/views/login/index.scss";
</style>
